<template>
	<view class="index-page page">
		<loading v-if="showLoading"></loading>
		<CustomNav  title="创业" :isBack="true"></CustomNav>
		<view class="content">
	<view class="swiper-block">
		<swiper :indicator-dots="false" :autoplay="true" :circular="true" :interval="5000"
			style="height: 600rpx;">
			<swiper-item v-for="(item, index) in swiperList" :key="item.id">
				<image :src="cloudStorage+item.bannerUrl"></image>
			</swiper-item>
		</swiper>
	</view>
	<view style="padding: 30rpx;margin-top: 10rpx;">
		<view class="title-block">
			<view class="title FangZhengHanZhenGuangBiaoJianTi">创业板块</view>
		</view>
		
		<view class="info-block">
			<view class="info-block-item" v-for="(item, index) in swiperList1" :key="item.id"
				@click="jumpActivity(item.id)">
				<image class="info-img" :src="cloudStorage+item.businessFace" mode="aspectFill"></image>
				<template>
					<view class="item-title">{{item.name}}</view>
				</template>
				<view class="btn">
					立即进入
					<image class="ic_retangle_right" :src="cloudStorage+'/file/retangle.png'"></image>
				</view>
			</view>
		</view>
	</view>

		</view>
		<Tabbar style="position: fixed; left: 0; bottom: 0"></Tabbar>
	</view>
</template>

<script>
	import CustomNav from '@/components/CustomNav/CustomNav';
	import Tabbar from '@/components/Tabbar/Tabbar';
	import {
		getBannerList
	} from '@/api/home.js'
	import {
		getUserBusinessList,
	} from '@/api/acticity.js';
	import {
		businessActivity,
		entrepreneursUser
	} from '@/api/bus.js';
	import {
		isMore
	} from '@/util/util.js'
	import {
		getStorage
	} from '@/util/auth';
	export default {
		components: {
			Tabbar,
		},
		data() {
			return {
				conf: {
					page: 1,
					limit: 10,
					businessName: '',
				},
				more: true,
				sort: 0,
				type: '',
				latitude: '',
				longitude: '',
				form: {
					isIndustry: '',
				},
				industryIndex: 0,
				industry: [],
				list: [],
				areaInfo: {
					areaId: ''
				},
				swiperList: [],
				swiperList1: []
			};
		},
		 onLoad(e) {
			this.getBannerListMiddle()
			this.getBannerList() 
		},
		methods: {
		getBannerList() {
			return getBannerList({
				type: 5
			}).then((res) => {
				this.swiperList = res.list
			})
		},
			jumpActivity(id) {
				uni.navigateTo({
					url: '/page_other/start_bus/categoryDetails?id=' + id
				})
			},
			//中间轮播图
			getBannerListMiddle() {
				return entrepreneursUser({
				}).then((res) => {
					this.swiperList1 = res.list
				})
			},
			screen(e) {
				this.sort = e
				this.conf.page = 1
				this.getBannerListMiddle()
			},
			handleRefresh() {
				this.conf.page = 1;
				this.more = true
				uni.showLoading({
					title: '加载中',
					mask: true
				})
				this.getBannerListMiddle()
			},
			//获取商家类型
			getBusinessTypeList() {
				return getBusinessTypeList().then((res) => {
					let list = res || []
					var obj = {
						id: 0,
						name: '全部'
					}
					list.unshift(obj)
					this.industry = list
				})
			},
			bindIndustry(e) {
				this.industryIndex = e.detail.value;
				this.form.isIndustry = this.industry[this.industryIndex].id
				this.conf.page = 1
				this.getBannerListMiddle()
			},
			onChange(e) {
				console.log(e)
			},
		},
		// onPullDownRefresh() {
		// 	this.handleRefresh();
		// },
		// onReachBottom() {
		// 	if (this.more) {
		// 		this.conf.page++;
		// 		uni.showLoading({
		// 			title: '加载中',
		// 			mask: true
		// 		})
		// 		this.getBannerListMiddle()
		// 	}
		// },
	};
</script>

<style scoped lang="scss">
	.index-page {
		overflow: hidden;

		.top-banner {
			width: 100%;
		}

		.content {
			width: 100%;
		
			margin-bottom: 140rpx;

			.info-block {
				margin-top: 20rpx;

				.info-block-item {
					margin-bottom: 35rpx;
					height: 320rpx;
					border-radius: 20rpx;
					box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
					position: relative;

					.info-img {
						width: 100%;
						height: 220rpx;
						border-radius: 20rpx 20rpx 0 0;
					}

					.item-title {
						font-weight: bold;
						font-size: 36rpx;
						margin-left: 30rpx;
						margin-top: 18rpx;
					}

					.btn {
						position: absolute;
						background: linear-gradient(45deg, #ff2f34, #ff8e53);
						/* 添加渐变效果 */
						box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
						/* 添加阴影效果 */
						display: inline-block;
						padding: 6px 12px;
						/* 调整内边距以控制胶囊的大小 */
						border-radius: 20px;
						/* 圆角的大小 */
						bottom: 0;
						right: 30rpx;
						color: white;
						line-height: 38rpx;
						margin-bottom: 20rpx;
						width: 200rpx;
						height: 60rpx;
						font-size: 34rpx;
						font-weight: 500;

						.ic_retangle_right {
							position: absolute;
							margin-left: 10rpx;
							bottom: 18rpx;
							width: 25rpx;
							height: 25rpx;
							float: right;

						}
					}
				}
			}

			.swiper-block {
				width: 100%;
				height: 580rpx;
				border-radius: 20rpx;
			

				image {
					width: 100%;
					height: 100%;
					// border-radius: 20rpx;

				}
			}

			.title-block {
				width: 100%;
				display: flex;
				justify-content: space-between;
				color: #FF2F34;
				align-items: center;

				.title {
					font-size: 36rpx;
				}
			}

		}
	}
</style>